<template>
  <div>
    <el-card>
      <el-table :data="permissionList" border row-key="id">
        <el-table-column label="菜单名称" prop="name"></el-table-column>
        <el-table-column
          label="权限标识(路由组件名)"
          prop="code"
        ></el-table-column>
        <el-table-column label="更新时间" prop="updateTime"></el-table-column>
        <el-table-column label="操作">
          <template #="{ row }">
            <el-button
              v-show="row.level != 4"
              icon="Plus"
              size="small"
              :type="row.level == 3 ? 'success' : 'primary'"
              @click="handleUpdatePermission(true, row)"
              >{{ row.level == 3 ? "添加功能" : "添加菜单" }}</el-button
            >
            <el-button
              icon="Edit"
              size="small"
              :disabled="row.level == 1"
              type="warning"
              @click="handleUpdatePermission(false, row)"
              >编辑</el-button
            >

            <el-popconfirm
              :title="`确定删除【${row.name}】吗?`"
              @confirm="handleDeletePermission(row.id)"
            >
              <template #reference>
                <el-button icon="Delete" size="small" type="danger"
                  >删除</el-button
                >
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加或更新菜单对话框 -->
    <el-dialog v-model="permissionDialog" title="菜单管理" width="30%">
      <el-form>
        <el-form-item label="菜单名称:">
          <el-input
            placeholder="请输入菜单名称"
            clearable
            v-model="newPermissionData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单标识:">
          <el-input
            placeholder="请输入菜单标识"
            clearable
            v-model="newPermissionData.code"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="permissionDialog = false">取消</el-button>
          <el-button type="primary" @click="submitPermission"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as permissionRequest from "@/api/acl/permission";
import { menuResponseData, menuObj } from "@/api/acl/permission/type";
import { onMounted, reactive, ref } from "vue";
import checkResult from "@/utils/notice";

let permissionList = ref<menuObj[]>([]);
let permissionDialog = ref<boolean>(false);

//收集新增菜单数据
let newPermissionData = reactive<menuObj>({
  name: "",
  code: "",
  level: 0,
  pid: 0,
});

//封装获取菜单数组的方法
const getPermissionList = async () => {
  let result: menuResponseData = await permissionRequest.permission();
  if (result.code == 200) {
    permissionList.value = result.data;
  }
};

//点击添加/编辑菜单
const handleUpdatePermission = (isAdd: boolean = true, row: menuObj) => {
  //清空上一次收集的数据
  Object.assign(
    newPermissionData,
    JSON.parse(
      JSON.stringify({
        name: "",
        code: "",
        level: 0,
        pid: 0,
      }),
    ),
  );
  delete newPermissionData.id;
  if (!isAdd) {
    //修改，回显数据
    newPermissionData.id = row.id;
    newPermissionData.name = row.name;
    newPermissionData.code = row.code;
    newPermissionData.level = row.level;
    newPermissionData.pid = row.pid;
  } else {
    //添加，传入必要参数
    newPermissionData.level = row.level + 1;
    newPermissionData.pid = row.id as number;
  }
  permissionDialog.value = true;
};
//提交菜单数据
const submitPermission = async () => {
  if (newPermissionData.id) {
    //更新
    let result = await permissionRequest.update(newPermissionData);
    checkResult(result, "更新菜单", "code", 200, getPermissionList);
  } else {
    //添加
    let result = await permissionRequest.save(newPermissionData);
    checkResult(result, "添加菜单", "code", 200, getPermissionList);
  }
  permissionDialog.value = false;
};

//删除菜单
const handleDeletePermission = async (id: number) => {
  let result = await permissionRequest.remove(id);
  checkResult(result, "删除菜单", "code", 200, getPermissionList);
};

onMounted(() => {
  getPermissionList();
});
</script>

<style scoped></style>
